<template>
  <div style="height: 100%;">
    <el-card class="update-log" style="height: 100%;background-color: #0C2136;border-color: #123355;">
      <div slot="header" class="clearfix">
        <span style="color: #ffffff;">打卡记录</span>
      </div>
      <div class="body" style="height: 100%;" ref="bodyRef">
        <ul class="infinite-list" 
            v-infinite-scroll="load" 
            @mouseenter="pauseScroll"
            @mouseleave="resumeScroll"
            :style="{ overflow: 'auto', color: '#fff', height: listHeight + 'px', padding: '1px' }">
          <li v-for="item in list" :key="item.id" class="infinite-list-item" style="font-size: 11px;"><span style="background-color: #206D97;padding: 3px;font-size: 11px;">已认证</span><span :title="`时间: ${item.checkinDate}, 备注: ${item.remark}`"> 时间: {{ item.checkinDate }},备注: {{item.remark}}</span></li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { listcheckIn } from "@/api/lock/checkIn"
  export default {
    data() {
      return {
        listHeight: 0, // 初始ul高度
        count:10,
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        list: [],
        total: 0,
        loading: false,
        autoScrollInterval: null, // 自动滚动的interval引用
        scrollSpeed: 1, // 滚动速度（像素/帧）
        isPaused: false // 是否暂停滚动
      }
    },
    mounted() {
      this.calculateListHeight();
      window.addEventListener('resize', this.calculateListHeight); // 监听窗口变化调整高度
      this.startAutoScroll(); // 启动自动滚动
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.calculateListHeight); // 清理监听器
        this.stopAutoScroll(); // 清理自动滚动
    },
    created() {
      this.getList()
    },
    methods: {
      load() {
        if (this.list.length < this.total) {
          this.queryParams.pageNum ++
          this.getList()
        }
      },
      getList() {
        this.loading = true
          listcheckIn(this.queryParams).then(response => {
            this.list.push(...response.rows);
            this.total = response.total;
            this.loading = false;
          });
      },
      calculateListHeight() {
        if (this.$refs.bodyRef) {
          // 计算bodyRef的高度并赋值给listHeight
          this.listHeight = this.$refs.bodyRef.clientHeight - 60;
        }
      },
      startAutoScroll() {
        if (this.isPaused) return; // 如果处于暂停状态，不启动滚动
        const scrollContainer = this.$refs.bodyRef.querySelector('.infinite-list');
        this.autoScrollInterval = setInterval(() => {
          if (scrollContainer && !this.isPaused) {
            // 如果滚动到底部，重置到顶部
            if (scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight) {
              scrollContainer.scrollTop = 0;
            } else {
              scrollContainer.scrollTop += this.scrollSpeed;
            }
          }
        }, 50);
      },
      pauseScroll() {
        this.isPaused = true;
        this.stopAutoScroll();
      },
      resumeScroll() {
        this.isPaused = false;
        this.startAutoScroll();
      },
      stopAutoScroll() {
        if (this.autoScrollInterval) {
          clearInterval(this.autoScrollInterval);
          this.autoScrollInterval = null;
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-card ::v-deep .el-card__header {
    padding: 7px 15px 7px;
    background: linear-gradient(to bottom, #1B506E, #173F5A, #13324C);
    border-bottom: #123355;
  }

  .el-card ::v-deep .el-card__body {
    height: 100%;
  }

  ul {
    list-style: none;
  }

  .infinite-list-item{
        width: 370px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
  }
</style>

